<template>
  <div class="app-container">
    <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="68px">
      <el-form-item label="仓库" prop="spckmc">
        <el-input v-model="data.spckmc" placeholder="请输入仓库" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="" prop="allyCheck">
        <el-checkbox v-model="data.allyCheck" @keyup.enter.native="handleQuery">显示所有仓库</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleUpdate(null,'添加仓库')"
          v-hasPermi="['zhcloud:zdspck:add']"
        >添加仓库
        </el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list" :height="tableHeight">
      <af-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="left" width="120px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row,'属性')"
            v-hasPermi="['zhcloud:zdspck:modify']"
          >属性
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row,'仓位')"
            v-hasPermi="['zhcloud:position:list']"
          >仓位
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row,'库存')"
            v-hasPermi="['zhcloud:zdspck:stock']"
          >库存
          </el-button>
        </template>
      </af-table-column>
      <af-table-column label="仓库名称" align="center" prop="spckmc" fixed="left"/>
      <af-table-column label="当前库存(吨)" align="center" prop="stock"/>
      <af-table-column label="预估库容(吨)" align="center" prop="litter"/>
      <af-table-column label="仓库面积(平方米)" align="center" prop="area"/>
      <af-table-column label="当日入仓件数" align="center" prop="spjsi"/>
      <af-table-column label="当日入仓吨数" align="center" prop="spsli"/>
      <af-table-column label="当日出仓件数" align="center" prop="spjso"/>
      <af-table-column label="当日出仓吨数" align="center" prop="spslo"/>
      <af-table-column label="当日预约入仓件数" align="center" prop="spjsiy"/>
      <af-table-column label="当日预约入仓吨数" align="center" prop="spsliy"/>
      <af-table-column label="当日预约出仓件数" align="center" prop="spjsoy"/>
      <af-table-column label="当日预约出仓吨数" align="center" prop="spsloy"/>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-drawer :title="title" :visible.sync="open" size="35%" :destroy-on-close="true">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="仓库名称" prop="spckmc" :rules="rules.spckmc">
              <el-input v-model="form.spckmc" placeholder="请输入仓库名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="仓库备注" prop="spckbz">
              <el-input v-model="form.spckbz" placeholder="请输入仓库备注"/>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="是否停用" prop="state">
              <el-checkbox v-model="form.stateCheck">停用</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="预计可存放吨数" prop="litter">
              <el-input v-model="form.litter" placeholder="请输入预计可存放吨数"/>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="仓库面积(平方米)" prop="area">
              <el-input v-model="form.area" placeholder="请输入仓库面积(平方米)"/>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="所在区域" prop="addr123" :rules="rules.addr123">
              <el-cascader v-model="form.addr123" placeholder="请输入所在区域" :options="options" filterable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="详细地址" prop="saddress" :rules="rules.saddress">
              <el-input v-model="form.saddress" placeholder="请输入详细地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="联系人" prop="name">
              <el-input v-model="form.name" placeholder="请输入联系人"/>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="" prop="">
              <el-button v-show="title === '属性'" style="margin-top: 15px" type="primary" @click="submitForm('form')">修改
              </el-button>
              <el-button v-show="title === '添加仓库'" style="margin-top: 15px" type="primary" @click="submitForm('form')">添加
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-drawer>

    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" :style="'margin-top: 60px;height:' + divMainHeight+'px;'"></div>
  </div>
</template>

<script>
  import {list, modify, add, doughnutChart} from "@/api/zdspck/api";
  import echarts from 'echarts';
  import variables from '@/assets/styles/variables.scss'
  
  export default {
    name: "Zdspck",
    data() {
      return {
        options: [],
        clientHeight: document.documentElement.clientHeight,
        tableHeight: 500,// 定义table高度
        divMainHeight:400,
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 仓库表格数据
        list: [],
        // 是否显示弹出层
        open: false,
        title: '',
        form: {},
        // 页码
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        sForm: {
          area: "",
          litter: "",
          name: "",
          nature: "",
          phone: "",
          quid: "",
          saddress: "",
          shengid: "",
          shiid: "",
          spckbz: "",
          spckid: "",
          spckmc: "",
          state: ""
        },
        // 页码
        data: {
          spckmc: '',
          ally: '',
          allyCheck: false
        },
        rules: {
          spckmc: [
            { required: true, message: "仓库名称不能为空", trigger: "blur" }
          ],
          addr123: [
            { required: true, message: "所在区域不能为空", trigger: "blur" }
          ],
          saddress: [
            { required: true, message: "详细地址不能为空", trigger: "blur" }
          ],
        }
      };
    },
    mounted() {
      //  重置浏览器高度
      window.onresize = () => {
        this.clientHeight = document.documentElement.clientHeight;
      }
      this.getLegendData()
    },
    created() {
      this.getList();
      this.dictProvinceCityDistrict().then(response => {
        this.options = response.data;
      })
    },
    methods: {
      getLegendData() {
        doughnutChart().then(response => {
          if (response.code === 200) {
            let legendData = new Array()
            response.data.forEach(e=>legendData.push(e.name))
            this.divMainHeight = legendData.length * 45
            // 400
            let myChart = echarts.init(document.getElementById('main'));
            let option = {
              tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}吨 ({d}%)'
              },
              legend: {
                orient: 'vertical',
                type: 'scroll',
                right: 10,
                data: legendData,
                itemHeight: 20,
                itemGap: 10,
                textStyle: {
                  fontSize: 20,
                  fontWeight: 'bolder'
                }
              },

              series: [
                {
                  name: '仓库剩余货物情况',
                  type: 'pie',
                  radius: ['70%', '85%'],
                  center: ['40%', '50%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: 'center',
                    formatter: '{b}\n\n{c}吨   {d}% '
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '30',
                      fontWeight: 'bold',
                      color: '#000'

                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: response.data
                }
              ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
          }
        })
      },
      getList() {
        this.loading = true;
        if (this.data.allyCheck) {
          this.data.ally = '1'
        } else {
          this.data.ally = ''
        }
        list(this.data, this.queryParams).then(response => {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        //  初始值，自己定义
        this.tableHeight = this.clientHeight - 260
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid, data) => {
        if(valid) {
          this.form.state = this.form.stateCheck ? '停用' : '';
          this.form.shengid = this.form.addr123[0];
          this.form.shiid = this.form.addr123[1];
          this.form.quid = this.form.addr123[2];
          const sForm = this.sForm
          for(let i in sForm) {
            sForm[i] = this.form[i]
            sForm[i] = sForm[i] == undefined?'':sForm[i]
          }
          if ('属性' === this.title) {
            this.$modal.loading("数据正在修改中，请稍等...")
            modify(this.sForm).then(response => {
              if (response.code !== 200) {
                this.$modal.msgError(response.msg);
              } else {
                this.$modal.msgSuccess("修改成功");
                this.getList();
                this.open = false;
              }
              this.$modal.closeLoading()
            }).catch(()=> {
              this.$modal.closeLoading()
            })
          }
          if ('添加仓库' === this.title) {
            this.$modal.loading("数据正在添加中，请稍等...")
            add(this.sForm).then(response => {
              if (response.code !== 200) {
                this.$modal.msgError(response.msg);
              } else {
                this.$modal.msgSuccess("保存成功");
                this.getList();
                this.open = false;
              }
              this.$modal.closeLoading()
            }).catch(()=> {
              this.$modal.closeLoading()
            })
          }
        } else {
            for(let i in data) {
              const item = data[i]
              for(let j in item) {
                const message = item[j].message
                return this.$modal.msgError(message)
              }
            }
            return false
          }
        })
      },
      handleUpdate(row, title) {
        if ('属性' === title) {
          row.stateCheck = false
          this.form = Object.assign({}, row);
          this.form.addr123 = [Number(row.shengid), Number(row.shiid), Number(row.quid)]
          this.form.stateCheck = this.form.state && this.form.state !== '' ? true : false
          this.open = true;
          this.title = title;
        }
        if ('添加仓库' === title) {
          this.form = {};
          this.open = true;
          this.title = title;
        }
        if ('仓位' === title) {
          this.$router.push("/storage/storageSetting/zdspcw/index?spckmc=" + row.spckmc + "&spckid=" + row.spckid);
        }
        if ('库存' === title) {
          this.$router.push("/storage/storageSetting/zdspck/stock?spckmc=" + row.spckmc + "&spckid=" + row.spckid);
        }
      },
    }
  };
</script>
